<template>
    <div>
        <login-box v-if="showLogin" @showLoginBox="showLoginBox"></login-box>
        <div id="wrapper" class="wrapper">
            <!--=====================================-->
            <!--=            Header Start           =-->
            <!--=====================================-->
            <head-box @closeLoginBox="showLoginBox"></head-box>
            <section class="inner-page-banner" data-bg-image="../assets/images/banner1.jpg">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="breadcrumbs-area">
                                <h1>接单页面</h1>
                                <ul>
                                    <li>
                                        <a href="index.html">Home</a>
                                    </li>
                                    <li>All Ads</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--=====================================-->
            <!--=          Product Start         =-->
            <!--=====================================-->
            <section class="single-product-wrap-layout1 section-padding-equal-70 bg-accent">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-9 col-lg-8">
                            <div class="single-product-box-layout1">
                                <div class="product-info light-shadow-bg">
                                    <div class="product-content light-box-content">
                                        <div class="item-img-gallery">
                                            <div class="tab-content">
                                                <div class="tab-pane fade show active" id="gallery1" role="tabpanel">
                                                    <a href="#">
                                                        <img class="zoom_01" src="../assets/images/product1.jpg" alt="product" data-zoom-image="media/product/product24.jpg">
                                                    </a>
                                                </div>
                                                <div class="tab-pane fade" id="gallery2" role="tabpanel">
                                                    <a href="#">
                                                        <img class="zoom_01" src="../assets/images/product1.jpg" alt="product" data-zoom-image="media/product/product25.jpg">
                                                    </a>
                                                </div>
                                                <div class="tab-pane fade" id="gallery3" role="tabpanel">
                                                    <a href="#">
                                                        <img class="zoom_01" src="../assets/images/product1.jpg" alt="product" data-zoom-image="media/product/product26.jpg">
                                                     </a>
                                                </div>
                                                <div class="tab-pane fade" id="gallery4" role="tabpanel">
                                                    <a href="#">
                                                        <img class="zoom_01" src="../assets/images/product1.jpg" alt="product" data-zoom-image="media/product/product27.jpg">
                                                    </a>
                                                </div>
                                                <div class="tab-pane fade" id="gallery5" role="tabpanel">
                                                    <a href="#">
                                                        <img class="zoom_01" src="../assets/images/product1.jpg" alt="product" data-zoom-image="media/product/product28.jpg">
                                                    </a>
                                                </div>
                                            </div>
                                            <ul class="nav nav-tabs" role="tablist">
                                                <li class="nav-item">
                                                    <a class="nav-link active" data-toggle="tab" href="#gallery1" role="tab" aria-selected="true">
                                                        <img src="../assets/images/product1.jpg" alt="thumbnail">
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-toggle="tab" href="#gallery2" role="tab" aria-selected="false">
                                                        <img src="../assets/images/product1.jpg" alt="thumbnail">
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-toggle="tab" href="#gallery3" role="tab" aria-selected="false">
                                                        <img src="../assets/images/product1.jpg" alt="thumbnail">
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-toggle="tab" href="#gallery4" role="tab" aria-selected="false">
                                                        <img src="../assets/images/product1.jpg" alt="thumbnail">
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-toggle="tab" href="#gallery5" role="tab" aria-selected="false">
                                                        <img src="../assets/images/product1.jpg" alt="thumbnail">
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="single-entry-meta">
                                            <ul>
                                                <li><i class="far fa-clock"></i>July 18, 2019 12:20 pm</li>
                                                <li><i class="fas fa-map-marker-alt"></i>堪萨斯州阿比林</li>
                                                <li><i class="far fa-eye"></i>223 views</li>
                                            </ul>
                                            <div class="item-condition">New</div>
                                        </div>

                                        <div class="item-details">
                                            <ul class="nav nav-tabs" role="tablist">
                                                <li class="nav-item">
                                                    <a class="nav-link active" data-toggle="tab" href="#details" role="tab" aria-selected="true">描述</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-toggle="tab" href="#features" role="tab" aria-selected="false">要求</a>
                                                </li>
                                            </ul>
                                            <div class="tab-content">
                                                <div class="tab-pane fade show active" id="details" role="tabpanel">

                                                    <div class="application_process clearFix">

                                                        <dl class="ap1">

                                                            <dd><span>申请</span><br>试用资格</dd>
                                                        </dl>
                                                        <dl class="ap2">
                                                            <dd><span>购买</span>原价<i id="product_price_1" style="color: red"></i>下单领取 (包邮)  以原价去指定平台购买</dd>
                                                        </dl>
                                                        <dl class="ap3">
                                                            <dd><span>填写订单号</span><br>填写付款的订单号</dd>
                                                        </dl>
                                                        <dl class="ap4">

                                                            <dd><span>返还担保金</span>试用报告通过后返还试用担保金 <i id="commission_1" style="color: red"></i> 到您账户,您可提现</dd>
                                                        </dl>

                                                    </div>


                                                    <p>请按照要求完成订单</p>
                                                </div>
                                                <div class="tab-pane fade" id="features" role="tabpanel">
                                                    <p> 1:仿真购买
                                                        2:提供足迹
                                                        3:收藏截图
                                                        4:足迹截图
                                                        5:聊天截图
                                                    </p>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>


                                <div class="item-review light-shadow-bg">
                                    <div class="light-box-content">
                                        <form action="#">
                                            <div class="form-group">
                                                <div>
                                                    <button type="submit" class="item-btn" style="align-content: center">
                                                        确认接单
                                                    </button>
                                                </div>
                                                <div>

                                                </div>
                                            </div>
                                        </form>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-4 sidebar-break-md sidebar-widget-area">
                            <div class="widget-lg widget-price">
                                <div class="item-price">
                                    <span class="currncy-symbol">已交保证金:</span>
                                   1,300
                                </div>
                            </div>
                            <div class="widget-lg widget-author-info widget-light-bg">
                                <h3 class="widget-border-title">卖家信息</h3>
                                <div class="author-content">
                                    <div class="author-name">
                                        <div class="item-img">
                                            <img src="../assets/images/defaultAvatar.png" alt="author">
                                        </div>
                                    </div>
                                    <div class="author-name">
                                        <h4 class="author-title" id="name">奋斗的小青年</h4>
                                    </div>
                                    <div class="author-meta">
                                        <p>
                                            <span>商品价值:</span>
                                            <span id="product_price" style="color: red"><em class="price"></em></span>
                                        </p>
                                        <p>
                                            <span>返还金额:</span>
                                            <span id="commission" style="color: red"><em class="price"></em></span>
                                        </p>
                                        <p>
                                            <span>库存:</span>
                                            <span id="stock" style="color: red"><em class="price"></em></span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!--=====================================-->
            <!--=       Footer Start           	=-->
            <!--=====================================-->
            <!--=====================================-->
            <!--=       Modal Start           	 	=-->
            <!--=====================================-->
            <!-- Author Mail Box -->
            <div class="modal fade author-mail-box" id="author-mail" tabindex="-1" role="dialog" aria-hidden="true">
            </div>
        </div>
    </div>
</template>

<script>
    import request from "../assets/js/request";
    export default{
        name: "Arm",
        data() {
            return {

            }
        },
    }

    window.onload = function(){
        request({
            url: '/task/task_Details',
            method: 'get'
        }).then(response => {
            console.log(response)
            console.log(response.data);
            var a=response.data;
            $("#product_price").html("￥"+a.productPrice);
            $("#commission").html("￥"+a.commission);
            $("#product_price_1").html("￥"+a.productPrice);
            $("#commission_1").html("￥"+a.commission);
            $("#stock").html(a.stock);
        }).catch(error => {
        })
    }
</script>

<style scoped>

</style>
